<template>
	<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
		<div class="site-navbar__header">
			<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
				<a class="site-navbar__brand-lg" href="javascript:;">西尼罗病毒(WNV)风险评估系统</a>
				<a class="site-navbar__brand-mini" href="javascript:;">WNV</a>
			</h1>
		</div>
		<div class="site-navbar__body clearfix">
			<el-menu class="site-navbar__menu" mode="horizontal">
				<el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
					<icon-svg name="zhedie"></icon-svg>
				</el-menu-item>
			</el-menu>
			<div class="logo-box">
<!--				<img src="@/assets/img/logo.png" class="logo">-->
			</div>
			<el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
				<el-menu-item class="site-navbar__avatar" index="3">
					<el-dropdown :show-timeout="0" placement="bottom">
						<span class="el-dropdown-link">
							{{ userName }}
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
							<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-menu-item>
			</el-menu>
		</div>
		<!-- 弹窗, 修改密码 -->
		<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
	</nav>
</template>

<script>
	import UpdatePassword from './main-navbar-update-password'
	import {
		clearLoginInfo
	} from '@/utils'
	export default {
		data() {
			return {
				updatePassowrdVisible: false
			}
		},
		components: {
			UpdatePassword
		},
		computed: {
			navbarLayoutType: {
				get() {
					return this.$store.state.common.navbarLayoutType
				}
			},
			sidebarFold: {
				get() {
					return this.$store.state.common.sidebarFold
				},
				set(val) {
					this.$store.commit('common/updateSidebarFold', val)
				}
			},
			mainTabs: {
				get() {
					return this.$store.state.common.mainTabs
				},
				set(val) {
					this.$store.commit('common/updateMainTabs', val)
				}
			},
			userName: {
				get() {
					return this.$store.state.user.name
				}
			}
		},
		methods: {
			// 修改密码
			updatePasswordHandle() {
				this.updatePassowrdVisible = true
				this.$nextTick(() => {
					this.$refs.updatePassowrd.init()
				})
			},
			// 退出
			logoutHandle() {
				this.$confirm(`确定进行[退出]操作?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('/logOut'),
						method: 'post',
						data: this.$http.adornData()
					}).then(({
						data
					}) => {
						clearLoginInfo()
						this.$router.push({
							name: 'login'
						})
					})
				}).catch(() => {})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.site-navbar__body{
      	//background: linear-gradient(to left,#282c34,#FFFFFF);
	}
	.site-navbar__brand-lg{
	  	font-size: 14px;
	}
	.logo-box{
	  	float: left;
	  	display: flex;
	  	align-items: center;
	  	justify-content: flex-end;
	  	margin: 0 auto;
	  	width: calc(100% - 220px);
	  	height: 50px;
	  	.logo{
		  	height: 40px;
		  	width: 240px;
		}
	}
	.el-dropdown-link{
	  color: #000000;
	}
</style>
